<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    
    
    <title>孙伟业的小店</title>

    
  </head>
  <body>
    <link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.16/index.css" />
    <script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.16/index.js"></script>
    <script>
      window.CHATBOT_CONFIG = {
        endpoint: "/chat", 
        displayByDefault: true, 
        aiChatOptions: {
          initialConversation: [{
            
            role: 'assistant',
            message: '您好！欢迎光临参赛选手孙伟业的的商店。请问您今天想购买什么商品呢？我们这里有很多商品可供选择。'
          }],
          composerOptions: {
            autoFocus: true
          },
          conversationOptions: { 
            conversationStarters: [
              {prompt: '我想买扫地机器人。'},
              {prompt: '我想买三星电视机。'},
              {prompt: '我想买因特尔处理器的笔记本。'},
            ]
          },
          displayOptions: { 
            height: 600,
      
          },
          personaOptions: { 
            assistant: {
              name: '你好，我是智能导购',
              
              avatar: 'http://tc.sql2022.cn/tc/jinh_pc/1202.png',
              tagline: '请问你希望购买什么？',
            }
          },
          messageOptions: { 
            waitTimeBeforeStreamCompletion: 'never'
          }
        },
        dataProcessor: {
          /**
          * 在向后端大模型应用发起请求前改写 Prompt。
          * 比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。
          * @param {string} prompt - 用户输入的 Prompt
          * @param {string}  - 改写后的 Prompt
          */
          rewritePrompt(prompt) {
            return prompt;
          },
          processChunk(chunks) {
            let result = '';
            let sessionId = null;
            chunks.split("\n\n").forEach(chunk => {
              try {
                if (chunk == "") {
                  return;
                }
                chunk = chunk.replaceAll('\'', '\"');
                let data = JSON.parse(chunk);
                sessionId = data.thread_id;
                result += data.content || '';
              } catch (e) {
                throw(e);
              }
            });
            return [result, sessionId];
          }
        }
      };
    </script>
    <style>
      :root {
        /* webchat 工具栏的颜色 */
        --webchat-toolbar-background-color: #1464E4;
        /* webchat 工具栏文字和按钮的颜色 */
        --webchat-toolbar-text-color: #FFF;
      }
      .nlux-AiChat-root {
        /* 聊天框背景色调成透明，方便在整个对话框元素中引入渐变色 */
        --nlux-chtr--bgClr: transparent;
        /* 发送按钮的颜色 */
        --nlux-sbmBt-dslb--txtClr: #6ca1ca;
      }
      /* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置 来调整*/
      .webchat-container {
        z-index: 100;
        bottom: 20px;
        right: 60px;
        /* 将聊天框的颜色调整成渐变色  */
        border-radius: 15px;
        background-image: linear-gradient(to top right, white 0, white 50%, #bfdff5);
      }
      .webchat-container-toolbar {
        background: transparent;
        border-bottom: none;
      }
      /* 顶栏标题文字颜色 */
      .webchat-container-toolbar span {
        color: #333;
      }
      /* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置 来调整*/
      .webchat-bubble-tip {
        z-index: 99;
        bottom: 20px;
        /* 将气泡调整为胶囊形状 */
        right: 10px;
        width: 40px;
        display: flex;
        place-items: center;
        height: 120px;
        border-radius: 50px;
        background-repeat: no-repeat;
        background-position-y: 4px;
      }
      .webchat-bubble-tip::before {
        /* 气泡上的颜色和文字 */
        content: "AI 助手";
        display: block;
        clear: both;
        width: 20px;
        padding: 35px 14px 0px 13px;
        font-size: 15px;
        font-weight: bold;
      }
      .nlux-conversationStarters-container>.nlux-comp-conversationStarters button.nlux-comp-conversationStarter {
        /* 默认问题的背景色 */
        background: #daeef8;
        text-align: left;
      }
      /* 调整对话框默认界面中的布局比例 */
      .nlux-launchPad-container>.nlux-comp-welcomeMessage {
        flex: 0.5;
      }
      .nlux-conversation-container,
      .nlux-conversationStarters-container {
        /* 隐藏纵向滚动条 */
        -ms-overflow-style: none; /* IE 和 Edge */
        &::-webkit-scrollbar { /* Chrome, Safari 和 Opera */
          display: none;
        }
      }
    </style>

  </body>
</html>
